<!-- 护理项目列表页 -->
<template>
  <div class="min-h serveProject bg-wt">
    <!-- 导入搜索栏 子组件 -->
    <SearchForm
      :searchData="pagination"
      @handleClear="handleClear"
      @handleReset="handleReset"
      @handleSearch="handleSearch"
    >
    </SearchForm>
    <!-- 导入表格子组件 -->
    <TableList
      :data="data"
      :bordered="bordered"
      :hover="hover"
      :size="size"
      :total="total"
      :pagination="pagination"
      @onPageChange="onPageChange"
      @handleBulid="handleBulid"
      @handleEdit="handleEdit"
      @handleDelete="handleDelete"
      @handleDisable="handleDisable"
    ></TableList>
    <!-- 显示新增或修改对话框 -->
    <DialogForm
      ref="dialogFormRef"
      :data="formData"
      :visible="visible"
      :title="title"
      @handleClose="handleClose"
      @handleAdd="handleAdd"
      @handleEdit="handleEditForm"
    ></DialogForm>
    <!-- 显示删除对话框 -->
    <OperateDialog
      :id="deleteId"
      :visible="confirmVisible"
      @handleClose="handleCloseConfirm"
      @handleDelete="handleDeleteConfirm"
    >
    </OperateDialog>
    <!-- 显示启用/禁用对话框 -->
    <disableDialog
      :visible="disableVisible"
      :dataState="dataState"
      @handleClose="handleCloseDisable"
      @handleClick="handleClick"
    ></disableDialog>
  </div>
</template>

<!-- ········· -->
<!-- ··········JS··········· -->
<!-- ········· -->

<script setup lang="jsx">
import {
  getProjectDetails,
  getProjectList,
  projectAdd,
  projectDelete,
  projectStatus,
  projectUpdate
} from '@/api/serve'
// 导入分页列表查询子组件
import TableList from '@/pages/serve/plan/project/components/TableList.vue'
import { onMounted, ref } from 'vue'
// 导入搜索表单子组件
import SearchForm from './components/SearchForm.vue'
// 导入新增或修改对话框子组件
import { MessagePlugin } from 'tdesign-vue-next'
import DialogForm from './components/DialogForm.vue'
// 导入删除对话框子组件
import OperateDialog from '@/components/OperateDialog/index.vue'
// 导入启用/禁用对话框子组件
import disableDialog from '@/components/OperateDialog/disable.vue'
// 表格数据模型
const data = ref([])
const total = ref()

const bordered = ref(true)
const hover = ref(false)
const size = ref('medium')

const pagination = ref({
  pageNum: 1,
  pageSize: 5
})
const onPageChange = (pageInfo) => {
  console.log(pageInfo)

  // 更新分页数据模型
  pagination.value.pageNum = pageInfo.current
  pagination.value.pageSize = pageInfo.pageSize
  // 刷新列表
  getList()
}
// 查询护理项目数据列表
const getList = async () => {
  // 异步请求获取数据
  const result = await getProjectList(pagination.value)
  // 判断请求结果
  if (result.code == '200') {
    // 成功 更新数据模型
    data.value = result.data.records
    total.value = result.data.total
  }
}
// 钩子函数 页面挂载完成查询列表
onMounted(() => {
  getList()
})
// 清除表单
const handleClear = (val) => {
  if (val == 'name') {
    delete pagination.value.name
  } else if (val == 'status') {
    delete pagination.value.status
  }
  // 重新查询列表
  getList()
}
// 重置表单
const handleReset = () => {
  pagination.value = {
    pageNum: 1,
    pageSize: 5
  }
  getList()
}
const handleSearch = () => {
  getList()
}

// 新增对话框操作逻辑
// 控制对话框显示与隐藏
const visible = ref(false)
const title = ref('')
const dialogFormRef = ref({})
// 点击新增按钮事件
const handleBulid = () => {
  // 显示对话框
  visible.value = true
  // 修改标题为 '新增'
  title.value = '新增'
}
// 对话框取消按钮事件
const handleClose = () => {
  // 关闭表单对话框
  visible.value = false
}
// 确认按钮事件
const handleAdd = async (formData) => {
  // 调用新增护理项目接口
  const result = await projectAdd(formData)
  // 判断是否请求成功
  if (result.code == '200') {
    // 提示成功消息
    MessagePlugin.success('新增成功')
    // 刷新列表
    getList()
    // 关闭对话框
    handleClose()
    // 清空表单
    dialogFormRef.value.handleClear()
  } else {
    // 提示错误信息
    MessagePlugin.error(result.msg)
  }
}
// 定义表单数据模型
const formData = ref({})
// 点击编辑事件
const handleEdit = async (id) => {
  // 异步请求获取数据
  const result = await getProjectDetails(id)
  // 判断是否成功
  if (result.code == 200) {
    // 成功 更新对话框标题 '编辑'
    title.value = '编辑'
    // 更新对话框表单数据模型
    formData.value = result.data
    // 显示对话框
    visible.value = true
  } else {
    // 失败 提示错误消息
    MessagePlugin.error(result.msg)
  }
}
// 编辑确认事件
const handleEditForm = async (formData) => {
  // 异步请求调用更新接口
  const result = await projectUpdate(formData)
  // 判断请求是否成功
  if (result.code == 200) {
    // 提示成功消息
    MessagePlugin.success('编辑成功')
    // 刷新列表
    getList()
    // 关闭对话框
    handleClose()
    // 清空表单
    dialogFormRef.value.handleClear()
  } else {
    // 提示错误信息
    MessagePlugin.error(result.msg)
  }
}
// 控制删除确认弹窗
const confirmVisible = ref(false)
const deleteId = ref()
// 点击删除事件
const handleDelete = (id) => {
  // 显示删除确认弹窗
  confirmVisible.value = true
  deleteId.value = id
}
// 删除取消按钮事件
const handleCloseConfirm = () => {
  // 关闭弹窗
  confirmVisible.value = false
  MessagePlugin.info('删除取消')
}
// 删除确认按钮事件
const handleDeleteConfirm = async (id) => {
  // 异步请求调用删除接口
  const result = await projectDelete(id)
  if (result.code == 200) {
    MessagePlugin.success('删除成功')
    // 刷新页面
    getList()
    confirmVisible.value = false
  } else {
    MessagePlugin.error(result.msg)
  }
}

// 启用禁用操作
const params = ref({
  id: '',
  status: ''
})
// 控制对话框
const disableVisible = ref(false)
// 对话框状态
const dataState = ref()
// 点击启用 禁用按钮事件
const handleDisable = (id, status) => {
  // 显示对话框
  disableVisible.value = true
  // 记录当前id
  params.value.id = id
  if (status == 1) {
    // 原先是启用状态 现在进行禁用
    dataState.value = '0'
    params.value.status = 0
  } else {
    dataState.value = '1'
    params.value.status = 1
  }
}
// 取消按钮事件
const handleCloseDisable = () => {
  disableVisible.value = false
}
// 确认启用/禁用事件
const handleClick = async () => {
  // 异步请求
  const result = await projectStatus(params.value)
  if (result.code == 200) {
    MessagePlugin.success('操作成功')
    getList()
    disableVisible.value = false
  } else {
    MessagePlugin.error(result.msg)
  }
}
</script>
